<!DOCTYPE html>
<html lang="zh">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>赵老师的图片压缩器</title>
  <style>
    body {
      display: flex;
      justify-content: center;
      align-items: center;
      height: 100vh;
      margin: 0;
    }
    #image-preview {
      max-width: 100%;
      max-height: 300px;
      margin-bottom: 20px;
    }
    .tiktok{
    animation: uk-text-shadow-glitch .65s cubic-bezier(1,-1.91,0,2.79) 0s infinite normal both running;
	}
@keyframes uk-text-shadow-glitch {
    0% {
        text-shadow: none
    }
    25% {
        text-shadow: -1px -1px 0 #ff004f,1px 1px 0 #00f7ef
    }
    50% {
        text-shadow: 1px -1px 0 #ff004f,-1px 1px 0 #00f7ef
    }
    75% {
        text-shadow: -1px 1px 0 #ff004f,1px -1px 0 #00f7ef
    }
    100% {
        text-shadow: 1px 1px 0 #ff004f,-1px -1px 0 #00f7ef
    }
}
@keyframes uk-flicker {
    0% {
        opacity: 0
    }
    10% {
        opacity: .6;
        transform: scale(.8)
    }
    20% {
        opacity: 0
    }
    40% {
        opacity: 1
    }
    50% {
        opacity: .2;
        transform: scale(1.1)
    }
    100% {
        opacity: 1;
        transform: scale(1)
    }
};
  }
}
  </style>
</head>
<body>
  <div>
    <h1 class="tiktok">图片在线压缩</h1>
    <input type="file" id="image-input" accept="image/*">
    <br>
    <label for="compression-range">图片质量（%）:</label>
    <input type="range" id="compression-range" min="1" max="100" value="50">
    <span id="compression-level">50</span>
    <br>
    <button id="compress-btn" style="display: none;">压缩测算</button>
    <p id="estimated-size"></p>
    <img id="image-preview" src="">
    <a id="download-link" style="display: none;"></a>
    <br>
    <button id="download-btn" style="display: none;">下载当前质量</button>
    <label>平顶山工业职业技术学院-计算机与软件工程学院-赵老师制作</label>
    <br>
    <label class="tiktok">抖音涨粉中，请关注“赵老师爱吃饭（24729481）”、“赵老师爱跳舞（81442155101）”</label>
  </div>

  <script>
    const imageInput = document.getElementById('image-input');
    const compressionRange = document.getElementById('compression-range');
    const compressionLevel = document.getElementById('compression-level');
    const compressBtn = document.getElementById('compress-btn');
    const downloadLink = document.getElementById('download-link');
    const downloadBtn = document.getElementById('download-btn');
    const estimatedSize = document.getElementById('estimated-size');
    const imagePreview = document.getElementById('image-preview');
    var url = null;

    imageInput.addEventListener('change', function() {
      const file = imageInput.files[0];
      const reader = new FileReader();

      reader.onload = function(e) {
        imagePreview.src = e.target.result;
      }

      reader.readAsDataURL(file);
      compressBtn.style.display="block";
      downloadLink.download = "compressed_ " + file.name;
    });

    compressionRange.addEventListener('input', function() {
      compressionLevel.textContent = compressionRange.value;
    });

    compressBtn.addEventListener('click', function() {
      const img = new Image();
      img.src = imagePreview.src;

      img.onload = function() {
        const canvas = document.createElement('canvas');
        const ctx = canvas.getContext('2d');
        const compressionQuality = compressionRange.value / 100;

        canvas.width = img.width;
        canvas.height = img.height;

        ctx.drawImage(img, 0, 0, img.width, img.height);
        canvas.toBlob(function(blob) {
          url = URL.createObjectURL(blob);
          estimatedSize.textContent = `预估大小: ${Math.round(blob.size / 1024)} KB`;
        }, 'image/jpeg', compressionQuality);
      }
      downloadBtn.style.display="block";
    });
    downloadBtn.addEventListener('click', function() {
          downloadLink.href = url;
          downloadLink.click();
          URL.revokeObjectURL(url);
    });
  </script>
</body>
</html>
